<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        body {
            font-size: 12px;
        }
        h1 {
            text-align: center;
        }
        h3 {
            background: #0611df;
            color: white;
            text-align: center;
        }
    </style>
</head>

<body>
    <div id="app">
        <p v-show="socketState == 0" style="background-color:rgb(236, 217, 12)">正在连接服务器</p>
        <p v-show="socketState == 1" style="background-color:rgb(137, 236, 133)">与服务器正在保持连接</p>
        <p v-show="socketState == 2" style="background-color:rgb(207, 62, 9)">已经与服务器断开连接，请刷新重试</p>
        
        <h1>法官面板</h1>

        <p>你的token: {{token}}</p>
        <p>当前局数编号: {{gameNumber}}</p>
        <p>当前游戏状态: {{gameState}}</p>
 
        <div>
            <h3>玩家座位情况</h3>
            <div class="seatbox" style="overflow: hidden;">
                <div class="seat" :class="{'zhan': playerArr.filter(item => item.seat == i).length != 0, 'kong': playerArr.filter(item => item.seat == i).length == 0}" v-for="i in 12">
                    <p>
                        {{i}}号座位：
                        {{playerArr.filter(item => item.seat == i).length ? playerArr.filter(item => item.seat == i)[0].token + '坐这里了' : '空'}}
                    </p>
                </div>
            </div>

            <h3>配置</h3>
            <div>
                <span v-for="(item, index) in allCharacter" style="text-wrap: nowrap; margin-right:  20px;">
                    <!-- 因为“狼”会重复，所以加一个index，防止重复 -->
                    <label><input type="checkbox" v-model="characterArr" :value="item + '-' + index"> {{item}}</label>
                </span>
                <div style="font-size: 12px;">
                    数组：{{characterArr}}
                </div>
                <div style="font-size: 12px;">
                    socket待通信数组（已经被乱序了）：{{luanxuarr}}
                </div>

                <button @click="startGame" style="display: block; margin: 0 auto;">开始游戏</button>
            </div>
        </div>


        <!-- 不是等待开始 -->
        <div v-show="gameState != '等待开始'">
            <h3>玩家身份一览表</h3>
            <!-- 显示玩家身份 -->
            <ul style="background: pink;   list-style: none;">
                <li v-for="item in anzuowei" style="margin-right: 20px;" :style="{'text-decoration': item.cunhuo ? 'none':  'line-through'}" >
                    {{item.seat}}-{{item.shenfen}}
                    <button style="width: 60px;height:20px" @click="chuju(item.seat)">出局了</button>
                </li>
            </ul>


            <h3>投票管理</h3>
            <p>
                <b>投票标题：</b>
            </p>
            <div>
                <input type="text" v-model="toupiaomingcheng" style="font-size: 20px; display: block; margin: 0 auto;"> 
            </div>
            <div>
                <button @click="toupiaomingcheng='选择警长'">选择警长</button>
                <button @click="toupiaomingcheng='第1天放逐'">第1天放逐</button>
                <button @click="toupiaomingcheng='第2天放逐'">第2天放逐</button>
                <button @click="toupiaomingcheng='第3天放逐'">第3天放逐</button>
                <button @click="toupiaomingcheng='第4天放逐'">第4天放逐</button>
                <button @click="toupiaomingcheng='第5天放逐'">第5天放逐</button>
                <button @click="toupiaomingcheng='第6天放逐'">第6天放逐</button>
            </div>
            <div>
                <button @click="faqitoupiao" style="background-color: rgb(90, 231, 25);">发起投票</button>
                <button @click="jieshutoupiao" style="background-color: rgb(241, 25, 25);">结束投票</button>
            </div>
        </div>
    </div>
    <script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.min.js"></script>
    <script src="/socket.io/socket.io.js"></script>
    <script>
        var socket

        var app = new Vue({
            el: '#app',
            data: {
                token: '',
                socketState: 0,
                gameNumber: 0,
                gameState: 'null',
                playerArr: [],
                allCharacter: ['狼','狼','狼','狼','平民','平民','平民','平民','预言家','女巫','猎人','白痴','熊','丘比特','白狼王','黑狼王'],
                characterArr: [],
                toupiaomingcheng: '选择警长'
            },
            created() {
                // 检查本地存储
                let token = localStorage.getItem('langrenshatoken')
                if (token == null || token.length != 4) {
                    // 新玩家
                    token = this.generateRandomString(4)
                    localStorage.setItem('langrenshatoken', token)
                }

                this.token = token

                // 连接socket
                socket = io({
                    auth: {
                        token: token,
                        // 我是法官
                        type: '法官'
                    }
                });

                // 链接成功
                socket.on("connect", () => {
                    this.socketState = 1
                });

                // 链接失败
                socket.on("connect_error", () => {
                    this.socketState = 2
                });
                socket.on("disconnect", () => {
                    this.socketState = 2
                });

                // 消息
                socket.on("信息总对齐", (o) => {
                    console.log('信息总对齐:' + JSON.stringify(o))
                    this.gameNumber = o.gameNumber
                    this.gameState = o.gameState
                    this.playerArr = o.playerArr
                });
                socket.on("座位信息", (playerArr) => {
                    console.log('座位信息');
                    console.log(playerArr)

                    this.playerArr = playerArr
                });
                socket.on("", (o) => {

                });
                socket.on("", (o) => {

                });
            },
            computed: {
                anzuowei() {
                    let arrrr = [...this.playerArr]
                    console.log(arrrr)

                    return arrrr.filter(item =>  item.seat).sort((a, b) => a.seat - b.seat)


                },
                luanxuarr() {
                    let arrr = this.characterArr.map(item => {
                        let i = item.indexOf('-')
                        return item.slice(0, i)
                    })
                    // 乱序
                    let n = 30
                    while(n--) {
                        arrr.sort(() => Math.random() - 0.5)
                        if (Math.random() > 0,5) {
                            arrr.reverse()
                        }
                    }
                    return arrr
                }
            },
            methods: {
                chuju(i) {
                    socket.emit('出局', i)
                },
                jieshutoupiao() {
                    socket.emit('结束投票')
                },
                faqitoupiao() {
                    socket.emit('发起投票', this.toupiaomingcheng)
                },
                generateRandomString(length) {
                    let result = '';
                    const characters = 'ABCDEFGHJKLMNOPQRSTUVWXYZabcdefghijklmnpqrstuvwxyz123456789';
                    const charactersLength = characters.length;
                    for (let i = 0; i < length; i++) {
                        result += characters.charAt(Math.floor(Math.random() * charactersLength));
                    }
                    return result;
                },
                startGame() {
                    let mm = this.playerArr.filter(item => item.seat != 0 && item.seat != undefined).length

                    // if (this.characterArr.length != mm) {
                    //     alert('配置角色数' + this.characterArr.length + '和坐下人数' +  mm + '不等，不能开始游戏')
                    //     return;
                    // } 

                    // 去掉-的角色数组
                    
 
                    socket.emit('游戏开始', this.luanxuarr)
                    
                }
            }
        });
    </script>
</body>

</html>